<template>
    
    <!-- 组件的模板 -->
    <!-- <div class="page salary-detail" :class="{'padding_top': page_data.approve.approve_flag == 0}"> -->
    <div class="page salary-detail padding_top"  :style="isIphoneX?'padding-bottom: 85px;':''">
        <div class="top">
            <div class="info">
                <div class="time-range">{{startDate}} --- {{endDate}}</div>
                <div class="money">
                    <!-- <span class="bg_sprite"></span> -->
                    <span>{{page_data.general.total_wage/100}}元</span>
                </div>
                <span class="state s3" v-if="page_data.general.status_no==0"><span class="bg_sprite"></span>草稿</span>
                <span class="state s0" v-if="page_data.general.status_no==1"><span class="bg_sprite"></span>待审批</span>
                <span class="state s1" v-if="page_data.general.status_no==2"><span class="bg_sprite"></span>审批通过</span>
                <span class="state s2" v-if="page_data.general.status_no==3"><span class="bg_sprite"></span>审批拒绝</span>
                <span class="state s1" v-if="page_data.general.status_no==5"><span class="bg_sprite"></span>已支付</span>
                <span class="state s2" v-if="page_data.general.status_no==6"><span class="bg_sprite"></span>支付失败</span>
            </div>
            <div class="timeline" v-if="page_data.approve.approve_flag == 1">
                <p v-if="page_data.approve.action_id == 1">{{page_data.approve.create_user_name}}提交了工资单给{{page_data.approve.approve_user_name}}审批</p>
                <p v-if="page_data.approve.action_id == 2">{{page_data.approve.approve_user_name}}审批通过</p>
                <p v-if="page_data.approve.action_id == 3">{{page_data.approve.approve_user_name}}审批未通过</p>
                <p v-if="page_data.approve.action_id == 4">{{page_data.approve.approve_user_name}}已支付</p>
                <p v-if="page_data.approve.action_id == 5">{{page_data.approve.approve_user_name}}支付失败</p>
                <a class="more" href="javascript:;" @click="gotoPayExamineDetail">查看更多</a>
                <div class="time">
                    <span>{{page_data.approve.create_date}}</span>
                    <span>{{page_data.approve.create_at}}</span>
                </div>
                <span class="dot d1"></span>
                <span class="dot d2"></span>
            </div>
        </div>
        <div class="weui-cells__title">工资明细（{{page_data.detail.list.length}}人）</div>
        <ul class="salary-list">
            <template v-for="item in page_data.detail.list">
                <li class="com-border-bottom" @click="gotoPaySeePerDetail($index)">
                    <a class="flex mod-access bg-color touch" href="javascript:;">
                        <img class="avatar" v-if="item.logo.thumb_url" :src="item.logo.thumb_url" alt="">
                        <img class="avatar" v-else src="../../static/imgs/avatar.png" alt="">
                        <div class="c1">
                            <span class="name">{{item.user_name}}</span>
                            <span class="team">{{item.group_name}}</span>
                        </div>
                        <div class="c2">
                            <span class="money"><em>{{item.total_wage/100}}</em>元</span>
                            <span class="day">出勤{{page_data.detail.base_wage_unit == 0 ? item.abnormal_days/1+item.normal_days/1+'天' : item.total_time+'个小时'}}</span>
                        </div>
                    </a>
                </li>
            </template>
                      
        </ul>
         <div v-if="page_data.general.status_no==2&&page_data.action_no.action_no==4">
           <div class="btn-box bg-color fixed" @click='confirm' :style="isIphoneX?'padding-bottom: 35px;':''"><a href="javascript:;" class="weui-btn weui-btn_primary">支付</a></div>
         </div>
        <div class="footerBtn flex bg-color com-border-top" v-if="page_data.action_no.action_no == 3" :style="isIphoneX?'padding-bottom:25px;':''">
            <a class="touch" href="javascript:;" @click="goback(false)"><span class="bg_sprite icon_1"></span>驳回</a>
            <a class="touch" href="javascript:;" @click="goback(true)"><span class="bg_sprite icon_2"></span>通过</a>
        </div>
        <div class="footerBtn flex bg-color com-border-top" v-if="page_data.action_no.action_no == 1 || page_data.action_no.action_no == 2" :style="isIphoneX?'padding-bottom:25px;':''">
            <a class="touch edit" href="javascript:;" @click="gotoPayNewList">
                <span class="bg_sprite icon_3"></span>
                {{page_data.action_no.action_no == 1 ? '继续编辑' : '重新编辑'}}
            </a>
        </div>
    </div>
</template>

<script>
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import cache from 'gapi/cache.js'
    import widget from 'gapi/widget'
    import commonPage from 'clientApi/commonPage.js'
    import teamApi from 'clientApi/teamApi.js'
    import * as util from 'js/util.js'
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

    /**
     *  组件实例对象
     */
    export default {
        components: {

        },
        data: function(){
            return{
                team_id: 0,
                project_id: 0,
                user_id: 0,
                order_id: 0,
                page_data: {
                    "general": {
                        "order_name": "",
                        "total_wage": 0,
                        "start_date": 0,//时间戳
                        "end_date": 0,
                        "status_no": -1 //工资单状态 0：草稿 1：已提交，待审批 2：通过 3：驳回 -1：删除  5: 已支付  6：支付失败 
                    },
                    "approve": {
                        "approve_flag": 0, //0不展示 1展示
                        "create_uid": 0,
                        "create_user_name": "", //创建者
                        "approve_uid": 0,
                        "approve_user_name": "", //审批人
                        "action_id": 0,
                        "remark": "",
                        "create_date": "",
                        "create_at": ""
                    },
                    "detail": {
                        "detail_exist": 0, //0:不展示详情栏 1：展示详情栏
                        "base_wage_unit": "0", //0：元/天 1：元/小时
                        "list": []
                    },
                    "action_no": {
                        "action_no": 0 //不同角色的操作码 0:无操作 1:继续编辑 2:重新编辑 3:进行通过或驳回的操作
                    }
                },
                isShowPayBtn:false
            }
        },
        computed: {
            startDate: function(){
                return util.getLocalTime(this.page_data.general.start_date*1000,'MM月dd日')
            },
            endDate: function(){
                return util.getLocalTime(this.page_data.general.end_date*1000,'MM月dd日')
            },
            isIphoneX: function(){
                return util.isIphoneX()
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                // alert(location.href)
                this.team_id = util.getUrddataString('team_id')
                this.project_id = util.getUrddataString('project_id')
                this.user_id = util.getUrddataString('user_id')
                this.order_id = util.getUrddataString('order_id')
                //获取整体工资单详情
                this.getData()
                
                
            },
            getData(){
                commonPage.loadPageStatus('loading')
                util.ajax({
                    url:'/wage/order_user/detail',
                    type:'GET',
                    data:{
                        team_id: this.team_id,
                        project_id: this.project_id,
                        order_id: this.order_id
                    },
                    timeout:10000,
                    success:(result) => {
                        // alert(JSON.stringify(result))
                        console.log(JSON.stringify(result.data))
                        commonPage.loadPageStatus('loadSuccess')
                        if(result&&result.errno == 0){

                            this.page_data = result.data
                            document.title = this.page_data.general.order_name
                            //缓存是否可以删除工资单字段 isCanDeleteFlag
                            let isCanDeleteFlag = 0
                            if( this.page_data.general.status_no == 0 || this.page_data.general.status_no == 1 || this.page_data.general.status_no == 3){
                                isCanDeleteFlag = 1//可以删除工资单
                            }
                            // widget.toast('创建人'+this.page_data.approve.create_uid+ '本人' +this.user_id + ' ' + isCanDeleteFlag)
                            // widget.toast(JSON.stringify({'data': isCanDeleteFlag}))
                            cache.setCache('isCanDeleteFlag', {'data': isCanDeleteFlag}, 10000)
                        }else{
                            widget.toast(result.errmsg)
                        }
                    },
                    error: (xhr, status) => {
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('服务器异常')
                    },
                    noNetwork: () => {
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            gotoPaySeePerDetail(index){//查看人员工资明细
                cache.setCache('perDetails', this.page_data.detail.list, 10000)
                let encodeStr = encodeURIComponent(`per_index=${index}&base_wage_unit=${this.page_data.detail.base_wage_unit}&end_date=${this.page_data.general.end_date}`)
                location.href = `dmsaas://PaySeePerDetail?urdData=${encodeStr}`
            },
            gotoPayExamineDetail(){//审批详情
                let encodeStr = encodeURIComponent(`team_id=${this.team_id}&project_id=${this.project_id}&order_id=${this.order_id}`)
                location.href = `dmsaas://PayExamineDetail?urdData=${encodeStr}`
            },
            goback(label){
                if(label){
                    this.doSubmit(1, '')
                }else{
                    //填写驳回原因
                    teamApi.showAlertInputView('请输入驳回原因', '确定', '取消', (data) => {
                        // alert(JSON.stringify(data))
                        console.log(data)
                        if(data.status == 1){
                            this.doSubmit(0, data.text)
                        }
                    })
                }
            },
            doSubmit(action_no, remark){//通过或驳回
                commonPage.loadPageStatus('loading')
                util.ajax({
                    url:'/wage/approve/order',
                    type:'POST',
                    data:{
                        team_id: this.team_id,
                        project_id: this.project_id,
                        order_id: this.order_id,
                        action_no: action_no,
                        remark: remark || ''
                    },
                    timeout:10000,
                    success:(result) => {
                        console.log(result)
                        commonPage.loadPageStatus('loadSuccess')
                        if(result&&result.errno == 0){
                            if(action_no == 1){
                                widget.toast('审批通过')
                            }
                            commonPage.goBack(1)
                        }else{
                            widget.toast(result.errmsg)
                        }
                    },
                    error: (xhr, status) => {
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('服务器异常')
                    },
                    noNetwork: () => {
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            gotoPayNewList(){//重新编辑/继续编辑
                let encodeStr = encodeURIComponent(`origin_page=PayListDetail&order_id=${this.order_id}&team_id=${this.team_id}&project_id=${this.project_id}`)
                location.href = `dmsaas://PayNewList?urdData=${encodeStr}`
            },
                     confirm (){
                  teamApi.showPayDialog(this.page_data.general.total_wage/100,(data) => {
                
                        // console.log(data)
                        if(data.status == 1){

                            this.pay()
                        }
                    }
                ) 
              
            },
            pay(){
                commonPage.loadPageStatus('loading')
                 util.ajax({
                    url:'/wallet/pay/pay_wage',
                    type:'POST',
                    data:{
                        team_id: this.team_id,
                        project_id: this.project_id,
                        wage_order_id: this.order_id,
                       client_type:'3'
                    },
                    timeout:10000,
                    success:(obj) => {
                
                      commonPage.loadPageStatus('loadSuccess')
                        if(obj&&obj.errno == 0){
                          widget.toast("支付成功")
                              cache.getMemoryCache('wagesWebViewID',(data)=>{
                                if(data){
                                  
                                         commonPage.goBack(1,{},data.webViewID)
                                         }
                              })
                          
                        }else if(obj.errmsg){
                          teamApi.showPayFaildDialog(obj.errmsg,(data) => {
                        // alert(JSON.stringify(data))
                        console.log(data)  
                    });
                        }
                    },
                    error: (xhr, status) => {
                         commonPage.loadPageStatus('loadSuccess')
                        widget.toast('服务器异常')
                    },
                    noNetwork: () => {
                        // 无网络的回调
                         commonPage.loadPageStatus('loadSuccess')
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            }
        
        },
       created(){
            this.init();
        }

        
    }

    
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/salary.css"></style>
<style>
    div.padding_top {
        padding: 0 0 60px;
    }
    .weui-btn {
    height: 46px;
    line-height: 52px;
    width: 100%;
    font-size: 16px;
    color: #fa0;
   
  
}
.timeline{
    height:45px;
}
.weui-btn_primary {
    background-color: white;
}
.weui-btn_primary:not(.weui-btn_disabled):active {
  background-color:#f0f0f0;
  color: #fa0;
}
.btn-box:active{
  background: #f0f0f0!important;
}
.weui-btn_primary:active{
  background: #f0f0f0!important;
}
</style>



